<template>
  <view class="XSJImage">
    <view :style="{ width: width, height: height }">
      <u--image
        :src="src"
        :mode="mode"
        :width="width"
        :height="height"
        :shape="shape"
        :radius="radius"
        :lazyLoad="lazyLoad"
        :showMenuByLongpress="showMenuByLongpress"
        :loadingIcon="loadingIcon"
        :errorIcon="errorIcon"
        :showLoading="showLoading"
        :showError="showError"
        :fade="fade"
        :webp="webp"
        :duration="duration"
        :bgColor="bgColor"
        @click="$emit('click')"
        @error="$emit('error')"
        @load="$emit('load')"
      >
        <!-- <template v-slot:loading>
        <u-loading-icon></u-loading-icon>
      </template> -->
        <template v-slot:loading>
          <slot name="loading"></slot>
        </template>
      </u--image>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    // 图片地址
    src: {
      type: String,
      default: "",
    },
    // 裁剪模式
    mode: {
      type: String,
      default: "aspectFill",
    },
    // 宽度，单位任意
    width: {
      type: [String, Number],
      default: "300",
    },
    // 高度，单位任意
    height: {
      type: [String, Number],
      default: "225",
    },
    // 图片形状，circle-圆形，square-方形
    shape: {
      type: String,
      default: "square",
    },
    // 圆角，单位任意
    radius: {
      type: [String, Number],
      default: "0",
    },
    // 是否懒加载，微信小程序、App、百度小程序、字节跳动小程序
    lazyLoad: {
      type: Boolean,
      default: true,
    },
    // 开启长按图片显示识别微信小程序码菜单
    showMenuByLongpress: {
      type: Boolean,
      default: true,
    },
    // 加载中的图标，或者小图片
    loadingIcon: {
      type: String,
      default: "photo",
    },
    // 加载失败的图标，或者小图片
    errorIcon: {
      type: String,
      default: "error-circle",
    },
    // 是否显示加载中的图标或者自定义的slot
    showLoading: {
      type: Boolean,
      default: true,
    },
    // 是否显示加载错误的图标或者自定义的slot
    showError: {
      type: Boolean,
      default: true,
    },
    // 是否需要淡入效果
    fade: {
      type: Boolean,
      default: false,
    },
    // 只支持网络资源，只对微信小程序有效
    webp: {
      type: Boolean,
      default: false,
    },
    // 过渡时间，单位ms
    duration: {
      type: [String, Number],
      default: 500,
    },
    // 背景颜色，用于深色页面加载图片时，为了和背景色融合
    bgColor: {
      type: String,
      default: "#f3f4f6",
    },
  },
  data() {
    return {};
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.XSJImage {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>